<template>
   	<div class="pagination" >
   		<button @click="changePageNo(pageNo-1)" :disabled="pageNo===1">上一页</button>
   		<button @click="changePageNo(1)" v-show="startAndEnd.start>1">1</button>
   		<span v-show="startAndEnd.start>2">···</span>
        <button 
        v-for="(_,index) in (startAndEnd.end-startAndEnd.start+1)"
        :class="{active:index+startAndEnd.start===pageNo}"
        @click="changePageNo(index+startAndEnd.start)"
        >{{index+startAndEnd.start}}</button>
           
   		<span v-show="startAndEnd.end<totalPage-1">···</span>
   		<button v-show="startAndEnd.end<totalPage" @click="changePageNo(totalPage)">{{totalPage}}</button>
   		<button @click="changePageNo(pageNo+1)" :disabled="pageNo===totalPage">下一页</button>
   		<span>共 {{total}} 条</span>
   	</div>
</template>
   
<script>
   	export default {
   		name: "Pagination",
           
        props:['total','pageSize','pageNo','continues','changePageNo'],
        computed: {
            totalPage(){
                //向上取整
                return Math.ceil(this.total/this.pageSize)
            },
            //开始与结束页码
            startAndEnd(){
                const {pageNo,continues,totalPage} = this
                let start
                let end
                //连续展示页码数量大于总页数
                if(continues>totalPage){
                    start=1
                    end=totalPage
                }else{
                    //当前页前后各展示若干页
                    start = pageNo-parseInt(continues/2)
                    end =pageNo+parseInt(continues/2)
                    //计算的start小于0
                    if(start<=0){
                        start=1
                        end=continues
                    }
                    //计算的end大于总页数
                    if(end>totalPage){
                        end=totalPage
                        start=end-continues+1
                    }
                }
                
                
                return {start,end}
            }
        },
   	}
</script>
   
<style lang="less" scoped>
       .pagination {
           text-align:center;
           button {
               margin: 0 5px;
               background-color: #f4f4f5;
               color: gray;
               outline: none;
               border-radius: 2px;
               padding: 0 4px;
               vertical-align: top;
               display: inline-block;
               font-size: 13px;
               min-width: 35.5px;
               height: 28px;
               line-height: 28px;
               cursor: pointer;
               box-sizing: border-box;
               text-align: center;
               border: 0;
   
               &[disabled] {
                   color: #c0c4cc;
                   cursor: not-allowed;
               }
   
               &.active {
                   cursor: not-allowed;
                   background-color: #C81623;
                   color: #fff;
               }
   
           }
           span{
               display: inline-block;
               line-height: 28px;
               font-size: 14px;
               color:gray;
               vertical-align: middle;
           }
       }
</style>